<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火焰弹球打砖块游戏</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        
        .game-container {
            width: 800px;
            max-width: 100vw;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .game-app {
            width: 100%;
            display: flex;
            flex-direction: column;
        }
        
        /* 顶部信息栏 */
        .info-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: #333;
            color: white;
            font-size: 16px;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .hearts {
            letter-spacing: 2px;
        }
        
        /* 游戏区域 */
        .game-area {
            position: relative;
            width: 100%;
            height: 600px;
            background-color: #1a1a2e;
            overflow: hidden;
        }
        
        /* 游戏画布 */
        .game-canvas {
            position: relative;
            width: 100%;
            height: 100%;
        }
        
        /* 球 */
        .ball {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #3498db;
            transform: translate(-50%, -50%);
            transition: none;
        }
        
        /* 火焰球效果 */
        .ball.fire-effect {
            background: linear-gradient(45deg, #FFEB3B, #FF9800, #F44336);
            box-shadow: 0 0 15px #FF9800, 0 0 30px #F44336;
        }
        
        /* 挡板 */
        .paddle {
            position: absolute;
            width: 100px;
            height: 20px;
            background-color: #e74c3c;
            border-radius: 10px;
            bottom: 20px;
            transform: translateX(-50%);
        }
        
        /* 砖块 */
        .brick {
            position: absolute;
            width: 90px;
            height: 30px;
            border-radius: 5px;
            transition: opacity 0.2s;
        }
        
        /* 底部控制栏 */
        .control-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: #2c3e50;
            color: white;
        }
        
        .control-btn {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        
        .control-btn:hover {
            background-color: #2980b9;
        }
        
        /* 游戏覆盖层 */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        
        .overlay-content {
            text-align: center;
            color: white;
        }
        
        .overlay-content h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }
        
        .overlay-content p {
            font-size: 18px;
            margin-bottom: 10px;
        }
        
        .new-record {
            color: #FFD700;
            font-weight: bold;
            font-size: 24px;
        }
        
        .start-btn {
            margin-top: 20px;
            padding: 15px 30px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            transition: background-color 0.3s;
        }
        
        .start-btn:hover {
            background-color: #c0392b;
        }
        
        /* 响应式设计 */
        @media (max-width: 820px) {
            .game-container {
                width: 100%;
                height: 100vh;
                max-width: none;
                border-radius: 0;
            }
            
            .game-area {
                height: calc(100vh - 130px);
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div id="app">
            <!-- 顶部信息栏 -->
            <div class="info-bar">
                <div class="info-item">
                    <span class="label">得分：</span>
                    <span class="value">{{ score }}</span>
                </div>
                <div class="info-item">
                    <span class="label">生命值：</span>
                    <span class="hearts">{{ getHeartsDisplay() }}</span>
                </div>
                <div class="info-item">
                    <span class="label">本地最高分：</span>
                    <span class="value">{{ highScore }}</span>
                </div>
            </div>
            
            <!-- 游戏区域 -->
            <div class="game-area" @mousemove="handleMouseMove">
                <!-- 球 -->
                <div 
                    class="ball" 
                    :class="{ 'fire-effect': isFireMode }"
                    :style="{
                        left: `${ball.x}px`,
                        top: `${ball.y}px`
                    }"
                ></div>
                
                <!-- 挡板 -->
                <div 
                    class="paddle" 
                    :style="{
                        left: `${paddle.x}px`
                    }"
                ></div>
                
                <!-- 砖块 -->
                <div 
                    v-for="(brick, index) in bricks" 
                    :key="index" 
                    v-if="brick.status === 1"
                    class="brick" 
                    :style="{
                        left: `${brick.x}px`,
                        top: `${brick.y}px`,
                        backgroundColor: brick.color
                    }"
                ></div>
                
                <!-- 游戏结束/开始界面 -->
                <div v-if="showStartScreen || isGameOver" class="overlay">
                    <div class="overlay-content">
                        <h2 v-if="showStartScreen">火焰弹球打砖块</h2>
                        <h2 v-else>游戏结束！</h2>
                        <p v-if="showStartScreen">点击开始按钮开始游戏</p>
                        <p v-else>你的得分：{{ score }}</p>
                        <p v-if="isNewRecord" class="new-record">新纪录！🏆</p>
                        <button class="start-btn" @click="startGame">开始游戏</button>
                    </div>
                </div>
            </div>
            
            <!-- 底部控制栏 -->
            <div class="control-bar">
                <button class="control-btn" @click="restartGame">🔄 重新开始</button>
                <button class="control-btn" @click="togglePause" :disabled="showStartScreen || isGameOver">
                    {{ isPaused ? '▶️ 继续' : '⏸️ 暂停' }}
                </button>
                <div class="instructions">
                    鼠标/键盘←→控制挡板
                </div>
            </div>
        </div>
    </div>
    
    <script>
        const { createApp } = Vue
        
        createApp({
            data() {
                return {
                    // 游戏状态
                    score: 0,
                    lives: 3,
                    highScore: 0,
                    isPaused: false,
                    showStartScreen: true,
                    isGameOver: false,
                    isNewRecord: false,
                    
                    // 游戏元素
                    ball: {
                        x: 400,
                        y: 500,
                        radius: 10,
                        dx: 4,
                        dy: -4
                    },
                    paddle: {
                        x: 400,
                        width: 100,
                        height: 20
                    },
                    bricks: [],
                    brickWidth: 90,
                    brickHeight: 30,
                    brickRows: 5,
                    brickCols: 8,
                    brickPadding: 5,
                    brickOffsetTop: 60,
                    brickOffsetLeft: 35,
                    
                    // 火焰特效
                    isFireMode: false,
                    fireModeTimer: 0,
                    
                    // 游戏区域尺寸
                    gameWidth: 800,
                    gameHeight: 600,
                    
                    // 控制状态
                    leftPressed: false,
                    rightPressed: false,
                    
                    // 游戏循环
                    gameLoopId: null,
                    lastTime: 0
                }
            },
            mounted() {
                // 设置游戏区域尺寸
                this.updateGameDimensions()
                window.addEventListener('resize', this.updateGameDimensions)
                
                // 加载最高分
                this.loadHighScore()
                
                // 初始化砖块
                this.initializeBricks()
                
                // 绑定键盘事件
                window.addEventListener('keydown', this.handleKeyDown)
                window.addEventListener('keyup', this.handleKeyUp)
            },
            beforeUnmount() {
                // 清理
                window.removeEventListener('resize', this.updateGameDimensions)
                window.removeEventListener('keydown', this.handleKeyDown)
                window.removeEventListener('keyup', this.handleKeyUp)
                if (this.gameLoopId) {
                    cancelAnimationFrame(this.gameLoopId)
                }
            },
            methods: {
                // 更新游戏区域尺寸
                updateGameDimensions() {
                    const gameArea = document.querySelector('.game-area')
                    if (gameArea) {
                        this.gameWidth = gameArea.offsetWidth
                        this.gameHeight = gameArea.offsetHeight
                        this.resetPaddleAndBall()
                    }
                },
                
                // 获取生命值显示
                getHeartsDisplay() {
                    return '❤️'.repeat(this.lives)
                },
                
                // 初始化砖块
                initializeBricks() {
                    this.bricks = []
                    const colors = ['#FF5252', '#FF7043', '#FFA726', '#FFEE58', '#66BB6A', '#42A5F5', '#7E57C2', '#EC407A']
                    
                    for (let c = 0; c < this.brickCols; c++) {
                        for (let r = 0; r < this.brickRows; r++) {
                            const brickX = c * (this.brickWidth + this.brickPadding) + this.brickOffsetLeft
                            const brickY = r * (this.brickHeight + this.brickPadding) + this.brickOffsetTop
                            const color = colors[Math.floor(Math.random() * colors.length)]
                            this.bricks.push({ x: brickX, y: brickY, status: 1, color: color })
                        }
                    }
                },
                
                // 重置挡板和球
                resetPaddleAndBall() {
                    this.paddle.x = this.gameWidth / 2
                    this.ball.x = this.gameWidth / 2
                    this.ball.y = this.gameHeight - 50
                    this.ball.dx = 4
                    this.ball.dy = -4
                    this.isFireMode = false
                    this.fireModeTimer = 0
                },
                
                // 加载最高分
                loadHighScore() {
                    const saved = localStorage.getItem('breakoutHighScore')
                    this.highScore = saved ? parseInt(saved) : 0
                },
                
                // 保存最高分
                saveHighScore() {
                    if (this.score > this.highScore) {
                        this.highScore = this.score
                        localStorage.setItem('breakoutHighScore', this.highScore.toString())
                        this.isNewRecord = true
                    }
                },
                
                // 开始游戏
                startGame() {
                    if (this.isGameOver) {
                        // 重新开始游戏
                        this.score = 0
                        this.lives = 3
                        this.isGameOver = false
                        this.isNewRecord = false
                        this.initializeBricks()
                    }
                    this.showStartScreen = false
                    this.isPaused = false
                    this.resetPaddleAndBall()
                    this.startGameLoop()
                },
                
                // 重新开始游戏
                restartGame() {
                    if (this.gameLoopId) {
                        cancelAnimationFrame(this.gameLoopId)
                    }
                    this.score = 0
                    this.lives = 3
                    this.isGameOver = false
                    this.isPaused = false
                    this.isNewRecord = false
                    this.initializeBricks()
                    this.resetPaddleAndBall()
                    this.showStartScreen = true
                },
                
                // 暂停/继续游戏
                togglePause() {
                    if (this.showStartScreen || this.isGameOver) return
                    this.isPaused = !this.isPaused
                },
                
                // 开始游戏循环
                startGameLoop() {
                    const gameLoop = () => {
                        if (!this.isPaused && !this.isGameOver && !this.showStartScreen) {
                            this.update()
                        }
                        this.gameLoopId = requestAnimationFrame(gameLoop)
                    }
                    gameLoop()
                },
                
                // 更新游戏状态
                update() {
                    // 移动球
                    this.ball.x += this.ball.dx
                    this.ball.y += this.ball.dy
                    
                    // 墙壁碰撞检测
                    if (this.ball.x - this.ball.radius <= 0 || this.ball.x + this.ball.radius >= this.gameWidth) {
                        this.ball.dx = -this.ball.dx
                    }
                    
                    if (this.ball.y - this.ball.radius <= 0) {
                        this.ball.dy = -this.ball.dy
                    } else if (this.ball.y + this.ball.radius >= this.gameHeight) {
                        // 检测挡板碰撞
                        if (this.ball.x >= this.paddle.x - this.paddle.width / 2 && 
                            this.ball.x <= this.paddle.x + this.paddle.width / 2) {
                            this.ball.dy = -Math.abs(this.ball.dy)
                            // 根据碰撞位置调整水平速度
                            const hitPos = (this.ball.x - this.paddle.x) / (this.paddle.width / 2)
                            this.ball.dx = hitPos * 3
                        } else {
                            // 失去一条生命
                            this.lives--
                            if (this.lives <= 0) {
                                this.gameOver()
                            } else {
                                this.resetPaddleAndBall()
                            }
                        }
                    }
                    
                    // 砖块碰撞检测
                    this.checkBrickCollision()
                    
                    // 移动挡板
                    this.movePaddle()
                    
                    // 更新火焰模式
                    this.updateFireMode()
                },
                
                // 检查砖块碰撞
                checkBrickCollision() {
                    for (let i = 0; i < this.bricks.length; i++) {
                        const brick = this.bricks[i]
                        if (brick.status === 1) {
                            const ballLeft = this.ball.x - this.ball.radius
                            const ballRight = this.ball.x + this.ball.radius
                            const ballTop = this.ball.y - this.ball.radius
                            const ballBottom = this.ball.y + this.ball.radius
                            
                            const brickLeft = brick.x
                            const brickRight = brick.x + this.brickWidth
                            const brickTop = brick.y
                            const brickBottom = brick.y + this.brickHeight
                            
                            if (ballRight >= brickLeft && ballLeft <= brickRight && 
                                ballBottom >= brickTop && ballTop <= brickBottom) {
                                
                                // 确定碰撞方向
                                const overlapLeft = ballRight - brickLeft
                                const overlapRight = brickRight - ballLeft
                                const overlapTop = ballBottom - brickTop
                                const overlapBottom = brickBottom - ballTop
                                
                                const minOverlap = Math.min(overlapLeft, overlapRight, overlapTop, overlapBottom)
                                
                                if (minOverlap === overlapLeft || minOverlap === overlapRight) {
                                    this.ball.dx = -this.ball.dx
                                } else {
                                    this.ball.dy = -this.ball.dy
                                }
                                
                                brick.status = 0
                                this.score += 10
                                
                                // 随机生成火焰模式
                                if (Math.random() > 0.8) {
                                    this.activateFireMode()
                                }
                                
                                // 检查是否所有砖块都被消除
                                this.checkWin()
                            }
                        }
                    }
                },
                
                // 检查是否获胜
                checkWin() {
                    const remainingBricks = this.bricks.filter(brick => brick.status === 1)
                    if (remainingBricks.length === 0) {
                        // 进入下一关
                        this.initializeBricks()
                        this.resetPaddleAndBall()
                        // 增加球速
                        this.ball.dx *= 1.1
                        this.ball.dy *= 1.1
                    }
                },
                
                // 游戏结束
                gameOver() {
                    this.isGameOver = true
                    this.saveHighScore()
                },
                
                // 移动挡板
                movePaddle() {
                    const paddleSpeed = 7
                    if (this.leftPressed && this.paddle.x - this.paddle.width / 2 > 0) {
                        this.paddle.x -= paddleSpeed
                    }
                    if (this.rightPressed && this.paddle.x + this.paddle.width / 2 < this.gameWidth) {
                        this.paddle.x += paddleSpeed
                    }
                },
                
                // 激活火焰模式
                activateFireMode() {
                    this.isFireMode = true
                    this.fireModeTimer = 10000 // 10秒
                },
                
                // 更新火焰模式
                updateFireMode() {
                    if (this.isFireMode) {
                        this.fireModeTimer -= 16.67 // 约60fps
                        if (this.fireModeTimer <= 0) {
                            this.isFireMode = false
                        }
                    }
                },
                
                // 键盘按下事件
                handleKeyDown(e) {
                    if (e.key === 'ArrowLeft') {
                        this.leftPressed = true
                    } else if (e.key === 'ArrowRight') {
                        this.rightPressed = true
                    } else if (e.key === ' ') {
                        // 空格键控制暂停
                        e.preventDefault()
                        this.togglePause()
                    } else if (e.key === 'Enter') {
                        // 回车键开始游戏
                        this.startGame()
                    }
                },
                
                // 键盘释放事件
                handleKeyUp(e) {
                    if (e.key === 'ArrowLeft') {
                        this.leftPressed = false
                    } else if (e.key === 'ArrowRight') {
                        this.rightPressed = false
                    }
                },
                
                // 鼠标移动事件
                handleMouseMove(e) {
                    const gameArea = e.currentTarget
                    const rect = gameArea.getBoundingClientRect()
                    const relativeX = e.clientX - rect.left
                    
                    if (relativeX > 0 && relativeX < this.gameWidth) {
                        this.paddle.x = relativeX
                    }
                }
            }
        }).mount('#app')
    </script>
</body>
</html>